<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@page import="com.srini.pojos.LoggedInUser"%>
<%@page import="com.srini.util.AppUtil"%><html lang="en">
<head>
<title>T R M S - TimeSheet &amp; Reimbursement Management System</title>

<link rel="stylesheet" href="css/jqtransform.css" type="text/css"
	media="all" />
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='css/fullcalendar.print.css'
	media='print' />
<link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css"
	media="all" />
<link rel="stylesheet" href="css/global.css" type="text/css" media="all" />

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/grid.locale-en.js'></script>
<script type='text/javascript' src='js/jquery.jqGrid.min.js'></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type='text/javascript' src='js/jquery-ui-1.8.16.custom.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-timepicker-addon.js'></script>
<script type="text/javascript" src="js/notifier.js"></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript' src='js/FCController.js'></script>

<script language="javascript">
        
	$(document).ready(function() {
		$('.jqTransform').jqTransform({
			imgPath : 'images/'
		});
		notifierInst = new notifier($("#notifier"));
        <% String message = (String)request.getAttribute("message");
    	if (message != null) {
    	%>
    	notifierInst.showMessage("<%=message%>");
    	<%}
    	String currentPage = (String) request.getAttribute("currentPage");
    	if (AppUtil.isEmpty(currentPage)) {
    		currentPage= "timesheet";
    	}
       %>
       
		$('#fromHrs, #toHrs').timepicker({
			hourGrid: 4,
			minuteGrid: 10,
			stepMinute: 5			
		});
						
		jQuery("#list3").jqGrid({ url:'getDataServlet', datatype: "json", colNames:['Holiday Date', 'Description'], colModel:[ {name:'invdate',index:'invdate', width:190, resizable: false}, {name:'note',index:'note', width:290, sortable:false, resizable: false} ], rowNum:20, rowList:[10,20,30], pager: '#pager3', sortname: 'invdate', viewrecords: false, sortorder: "desc", caption: "List of Holidays", autowidth: true});
		$('.ui-jqgrid-titlebar-close','.ui-jqgrid').remove();
		
		jQuery("#list3").jqGrid('navGrid','#pager3',{edit:false,add:false,del:false});
		
		// grid for List of users
		jQuery("#users").jqGrid({ url:'getDataServlet?action=usersList', datatype: "json", colNames:['Login Name', 'First Name', 'Last Name'], colModel:[ {name:'loginname',index:'loginname', resizable: false}, {name:'fname',index:'fname', resizable: false}, {name:'lname',index:'lname', sortable:false, resizable: false} ], rowNum:20, rowList:[10,20,30], pager: '#pagers', sortname: 'loginname', viewrecords: false, sortorder: "desc", caption: "List of Users", autowidth: true});
		$('.ui-jqgrid-titlebar-close','.ui-jqgrid').remove();
		jQuery("#users").jqGrid('navGrid','#pagers',{edit:false,add:false,del:false});
		
		$(".icon-wrp").click(function(){
			var eleId = $(this).attr("for");
			if(eleId) $("#"+eleId).focus();
		});
		
		$(".formDiv").hide().css("visibility","visible");
		$(".rightNav").removeClass("loading");
		$('.<%= currentPage %>').show();
		$('.leftNav li a[rel=<%= currentPage%>]').addClass('active');
		
		
		var dates = $("#from, #to, #leavefrom, #leaveto, #reimfrom, #reimto, #holiday").datepicker({
			changeMonth : true,
			changeYear : true,
			numberOfMonths : 1
		});
				
				
		$("#tabs").tabs();
		$(".leftNav li a").click(function() {
			var divNm = $(this).attr('rel');
			$(".leftNav li a").removeClass('active');
	        $(this).addClass('active');
			$(".formDiv").hide();
			$("." + divNm).show();
		});
       
		$("#reimburseBtn").click(function () {
			if ($("#month").val() != 0) {
				document.forms["reimburse"].submit();
			} else {
				notifierInst.showMessage("Error::Please select the Month");
			}
		});

		$("#timeSheetBtn").click(function () {
			if ($("#from").val() == "" || $("#to").val() == "" || $("#fromHrs").val() == "" || $("#toHrs").val() == "") {
				notifierInst.showMessage("Error::Please select valid dates & work hours");
			} else {
				document.forms["timesheet"].submit();
			}
		});
	});

</script>
<%
LoggedInUser user = (LoggedInUser) session.getAttribute("loggedInUser");
String userName = user.getUserInfo().getDisplayName();
String role = user.getRole().getRole();
if (AppUtil.isEmpty(userName))
	userName = user.getUserInfo().getFirstName();
if (AppUtil.isEmpty(userName)) {
	userName = user.getUserName();
}
		
%>
</head>
<body>
	<div id="wrapper">
		<div class="container">
			<div class="content">
				<div class="header">
					<p class="fl page_header">T R M S</p>
					<p class="fr login_details"><%=userName %>
						&nbsp;<a style="font-size: 11px;" href="logout">(Logout)</a>
					</p>
					<div class="clear"></div>
				</div>
				<div class="navWrapper">
					<div class="leftNav">
						<ul>
							<li><a href="#" rel="timesheet">Time Sheet</a></li>
							<li><a href="#" rel="reimbursement">Reimbursement</a></li>
							<li><a href="#" rel="leaveapp">Leave Calendar</a></li>
							<li><a href="#" rel="userprofile">User Profile</a></li>
							<li><a href="#" rel="listofholidays">Holiday's List</a></li>
							<% if (role != null && role.equals("Admin")) { %>
							<li><a href="#" rel="admin">Admin Module</a>
							</li>
							<%} %>
						</ul>
					</div>
					<div class="rightNav loading">
						<div class="notifier ui-helper-clearfix" id="notifier"></div>
						<div class="timesheet formDiv showDiv" style="visibility: hidden">
							<form id="timesheet" name="timesheet" class="jqTransform"
								method="post" action="tttimeSheet">
								<h2 class="heading">Time Sheet</h2>
								Please select dates, IN and OUT timings to generate time sheet.<br /><br />
								<div class="rowElem">
									<label for="period">For Period:</label> <input type="text"
										id="from" name="from" style="margin-right: 10px;" /> <span
										class="icon-wrp ui-state-default" for="from"><span
										class="ui-icon ui-icon-calendar"></span>
									</span> <label for="to" class="next-control">to</label> <input
										type="text" id="to" name="to" /> <span
										class="icon-wrp ui-state-default" for="to"><span
										class="ui-icon ui-icon-calendar"></span>
									</span>
								</div>
								<div class="rowElem" style="padding-top: 20px">
									<label for="period">Work Hrs:</label> <input type="text"
										id="fromHrs" name="fromHrs" style="margin-right: 10px;" /> <span
										class="icon-wrp ui-state-default" for="fromHrs"><span
										class="ui-icon ui-icon-clock"></span>
									</span> <label for="toHrs" class="next-control">to</label> <input
										type="text" id="toHrs" name="toHrs" /> <span
										class="icon-wrp ui-state-default" for="toHrs"><span
										class="ui-icon ui-icon-clock"></span>
									</span>
								</div>
								<div class="rowElem btnRow">
									<input type="button" value="Generate" id="timeSheetBtn"/> <input type="reset"
										value="Reset" />
								</div>

								<div class="clear"></div>
							</form>
						</div>
						<div class="reimbursement formDiv" style="visibility: hidden">
							<form id="reimburse" name="reimburse" class="jqTransform"
								method="post" action="ttreimburse">
								<h2 class="heading">Reimbursement Form</h2>
								Please select month to generate Reimbursement details.<br /><br />
								NOTE: <strong>Please fill in User details before generating File.</strong><br/><br /><br />
								<div class="section">
									<div class="rowElem">
										<label for="month">For Month:</label> <select id="month"
											name="month">
											<option value="0">Select Month</option>
											<option value="1">January</option>
											<option value="2">February</option>
											<option value="3">March</option>
											<option value="4">April</option>
											<option value="5">May</option>
											<option value="6">June</option>
											<option value="7">July</option>
											<option value="8">August</option>
											<option value="9">September</option>
											<option value="10">October</option>
											<option value="11">November</option>
											<option value="12">December</option>
										</select>
									</div>
								</div>
								<div class="rowElem btnRow">
									<input type="button" value="Generate" id="reimburseBtn" />
								</div>
								<div class="clear"></div>
							</form>
						</div>
						<div class="leaveapp formDiv" style="visibility: hidden">
							<form id="leave" name="leave" class="jqTransform" method="post"
								action="ttaddHoliday">
								<h2 class="heading">Leave Calendar</h2>
								Please select dates on which you want to apply leave and click
								SAVE. <br />
								<br />
								<div class="section" style="width: 100%;">
									<div id='calendar'></div>
								</div>
								<div class="rowElem">
									<a href="javascript: void(0);" id="saveCalendar"> Save</a> <input
										type="hidden" name="type" value="0" /> <input type="hidden"
										name="leaves" value="" />
								</div>
								<div class="clear"></div>
							</form>
						</div>
						<div class="userprofile formDiv" style="visibility: hidden">
							<form id="user" name="user" class="jqTransform" method="post"
								action="ttuserprofile">
								<h2 class="heading">User Profile</h2>
								<div class="rowElem">
									<label for="empId">Employee Id:</label> <input type="text"
										name="empId" value="<%=user.getUserInfo().getEmpId() %>" />
									<label for="empName" class="next-control">Employee Name</label>
									<input type="text" name="empName"
										value="<%=user.getUserName() %>" readonly="readonly" />
								</div>
								<div class="rowElem">
									<label for="firstname">First name</label> <input
										name="firstname" type="text"
										value="<%= user.getUserInfo().getFirstName() %>" /> <label
										for="lastname" class="next-control">Last name</label> <input
										name="lastname" type="text"
										value="<%= user.getUserInfo().getLastName() %>" />
								</div>
								<div class="rowElem">
									<label for="manager">Manager Name:</label> <input type="text"
										name="manager" value="<%=user.getUserInfo().getManager() %>" />
									<label for="project" class="next-control">Project</label> <input
										type="text" name="project"
										value="<%=user.getUserInfo().getProject() %>" />
								</div>
								<div class="rowElem">
									<label for="distance">Distance (To &amp; Fro)</label> <input
										name="distance" type="text"
										value="<%=user.getUserInfo().getDistanceFromHome() %>" />
									<label for="workplace" class="next-control">Work Place</label> <input
										type="text" name="workplace"
										value="<%=user.getUserInfo().getWorkPlace() %>" />
								</div>
								<div class="rowElem">
									<label for="vehType">Vehicle Type:</label> <input type="radio"
										value="0" name="vehicle_type" id="vehicle_type"
										<%if ("0".equals(user.getUserInfo().getVehicle())) { %>
										checked="checked" <%} %> /> <label for="vehicle_type"
										class="forradio">2-Wheeler</label> <input type="radio"
										value="1" name="vehicle_type" id="veh_type"
										<%if ("1".equals(user.getUserInfo().getVehicle())) { %>
										checked="checked" <%} %> /> <label for="veh_type"
										class="forradio">4-Wheeler</label>
								</div>
								<div class="rowElem">
									<label for="foodperday">Address</label>
									<textarea id="address" name="address" rows="2" cols="43"><%= user.getUserInfo().getAddress() %></textarea>
								</div>
								<div class="rowElem btnRow">
									<input type="submit" value="Save" />
								</div>
								<div class="clear"></div>
							</form>
						</div>
						<div class="listofholidays formDiv" style="visibility: hidden">
							<form id="holidaylist" name="holidaylist" class="jqTransform">
								<h2 class="heading">List Of Holidays</h2>
								List of Holiday's for the Year <%= Calendar.getInstance().get(Calendar.YEAR) %><br/><br/>
								<div class="rowElem">
									<table id="list3"></table>
									<div id="pager3"></div>
								</div>
								<div class="clear"></div>
							</form>
						</div>
						<div class="admin formDiv" style="visibility: hidden">
							<h2 class="heading">Admin Module</h2>
							<div id="tabs">
								<ul>
									<li><a href="#tabs-1">Add User</a></li>
									<li><a href="#tabs-2" rel="holiday">Add Holiday</a></li>
									<li><a href="#tabs-3" rel="userList">Users List</a></li>
								</ul>
								<div id="tabs-1">
									<div class="section">
										<form action="ttaddUser" class="jqTransform" method="post"
											name="addUser">
											<span class="subheading">Employee Data</span>
											<div class="rowElem">
												<label for="empName">User Name</label> <input type="text"
													name="empName" value="" size="16" /> <label for="email"
													class="next-control">Email</label> <input type="text"
													name="email" value="" size="16" />

											</div>
											<div class="rowElem">
												<label for="trallowance">Travel Expense</label> <input
													name="trallowance" type="text" value="" size="16" /> <label
													for="foodallowance" class="next-control">Food
													Expense:</label> <input type="text" name="foodallowance" value=""
													size="16" />
											</div>
											<div class="rowElem">
												<label for="role">Role:</label> <select id="role"
													name="role">
													<option value="User">User</option>
													<option value="Admin">Admin</option>
												</select>
											</div>
											<div class="rowElem btnRow">
												<input type="submit" value="Create User" />
											</div>
										</form>
									</div>
									<div class="clear"></div>
								</div>

								<div id="tabs-2">
									<div class="section">
										<form action="ttaddHoliday" class="jqTransform" method="post"
											name="addHoliday">
											<span class="subheading">Holiday</span>
											<div class="rowElem">
												<label for="holiday">Holiday Date</label> <input
													type="hidden" name="type" value="1" /> <input type="text"
													name="holiday" id="holiday" value="" /> <span
													class="icon-wrp ui-state-default" for="holiday"><span
													class="ui-icon ui-icon-clock"></span>
												</span>
											</div>
											<div class="rowElem">
												<label for="desc">Description</label> 
													<input type="text" name="desc" id="desc" value="" size="17"/> 
											</div>
											<div class="rowElem btnRow">
												<input type="submit" value="Add" />
											</div>
										</form>
									</div>
									<div class="clear"></div>
								</div>
								<div id="tabs-3">
									<div class="section">
										<form class="jqTransform" method="post"
											name="usersList">
											<span class="subheading">List of Users</span>
											<div class="rowElem" style="width: 710px;">
									<table id="users"></table>
									<div id="pagers"></div>
								</div>
										</form>
									</div>
									<div class="clear"></div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
